import React, { useState, useEffect } from 'react';
import { 
  Layout, 
  Menu, 
  Breadcrumb, 
  Card, 
  Input, 
  Row, 
  Col,
  Spin,
  Empty,
  Tabs,
  Affix,
  Button
} from 'antd';
import { 
  AppstoreOutlined, 
  PictureOutlined, 
  UserOutlined,
  SearchOutlined,
  PlusOutlined
} from '@ant-design/icons';
import ArtworkGallery from '../../components/ArtworkGallery';
import cloudbase from '../../utils/cloudbase';
import styles from './index.module.less';

const { Header, Content, Sider } = Layout;
const { Search } = Input;
const { TabPane } = Tabs;

const HomePage = () => {
  const [categories, setCategories] = useState([]);
  const [loading, setLoading] = useState(true);
  const [selectedCategory, setSelectedCategory] = useState(null);
  const [searchKeyword, setSearchKeyword] = useState('');
  const [activeTab, setActiveTab] = useState('all');
  const [collapsed, setCollapsed] = useState(false);

  // 加载分类数据
  const loadCategories = async () => {
    try {
      setLoading(true);
      // 假设有一个获取分类的云函数
      const result = await cloudbase.callFunction('getCategories', {});
      
      if (result.code === 0) {
        setCategories(result.data.list);
      }
    } catch (error) {
      console.error('加载分类失败:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadCategories();
  }, []);

  // 处理分类选择
  const handleCategorySelect = ({ key }) => {
    setSelectedCategory(key === 'all' ? null : key);
  };

  // 处理搜索
  const handleSearch = (value) => {
    setSearchKeyword(value);
  };

  // 处理标签页切换
  const handleTabChange = (key) => {
    setActiveTab(key);
  };

  return (
    <Layout className={styles.layout}>
      <Header className={styles.header}>
        <div className={styles.logo}>艺术画廊</div>
        <div className={styles.search}>
          <Search
            placeholder="搜索作品或艺术家"
            allowClear
            enterButton={<SearchOutlined />}
            size="large"
            onSearch={handleSearch}
          />
        </div>
        <div className={styles.actions}>
          <Button type="primary" icon={<PlusOutlined />}>
            上传作品
          </Button>
        </div>
      </Header>
      <Layout>
        <Sider
          width={240}
          theme="light"
          collapsible
          collapsed={collapsed}
          onCollapse={setCollapsed}
          className={styles.sider}
          breakpoint="lg"
        >
          <Menu
            mode="inline"
            defaultSelectedKeys={['all']}
            defaultOpenKeys={['categories']}
            style={{ height: '100%', borderRight: 0 }}
            onSelect={handleCategorySelect}
          >
            <Menu.Item key="all" icon={<AppstoreOutlined />}>
              全部作品
            </Menu.Item>
            <Menu.SubMenu
              key="categories"
              icon={<PictureOutlined />}
              title="作品分类"
            >
              {categories.map(category => (
                <Menu.Item key={category._id}>{category.name}</Menu.Item>
              ))}
            </Menu.SubMenu>
            <Menu.SubMenu
              key="artists"
              icon={<UserOutlined />}
              title="艺术家"
            >
              <Menu.Item key="popular">热门艺术家</Menu.Item>
              <Menu.Item key="new">新晋艺术家</Menu.Item>
            </Menu.SubMenu>
          </Menu>
        </Sider>
        <Layout className={styles.contentLayout}>
          <Content className={styles.content}>
            <Breadcrumb className={styles.breadcrumb}>
              <Breadcrumb.Item>首页</Breadcrumb.Item>
              {selectedCategory && (
                <Breadcrumb.Item>
                  {categories.find(c => c._id === selectedCategory)?.name || '分类'}
                </Breadcrumb.Item>
              )}
            </Breadcrumb>
            
            <Card className={styles.mainCard}>
              <Tabs activeKey={activeTab} onChange={handleTabChange}>
                <TabPane tab="全部" key="all">
                  <ArtworkGallery 
                    category={selectedCategory} 
                    keyword={searchKeyword}
                  />
                </TabPane>
                <TabPane tab="最新" key="latest">
                  <ArtworkGallery 
                    category={selectedCategory} 
                    keyword={searchKeyword}
                    sort="createdAt"
                  />
                </TabPane>
                <TabPane tab="热门" key="popular">
                  <ArtworkGallery 
                    category={selectedCategory} 
                    keyword={searchKeyword}
                    sort="views"
                  />
                </TabPane>
              </Tabs>
            </Card>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default HomePage;